<template>
  <div :class="`tw-libtransfer x${_uid}`">
    <el-transfer
     v-model="val"
     :data="data"
     :filterable="filterable"
     :filter-method="filterMethod"
     :filter-placeholder="placeholder"
     :render-content="renderFunc"
     :titles="titles"
     :button-texts="buttontexts"
     :format="formats"
     :target-order="targetorder"
     @change="changeValue">
      <!-- 有需要了再增加吧 -->
      <!-- <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
      <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
    </el-transfer>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libtransfer',

  props,

  data () {
    return {
      val: []
    }
  },

  methods: {
    changeValue () {
      // console.log('aaaa', this.val)
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },

    setStyle () {
      const style = `
        .tw-libtransfer.x${this._uid} .el-input__inner {
          color: ${this.color};
          background-color: ${this.bgColor};
          border-color: ${this.borderColor};
        }
        .tw-libtransfer.x${this._uid} .el-input.is-active .el-input__inner, .tw-libtransfer.x${this._uid} .el-input__inner:focus {
          border-color: ${this.focusBorderColor};
        }
      `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    },
    filterMethod (query, item) {
      if (this.filterFn !== '' && typeof this.filterFn === 'function') {
        return this.filterFn()
      } else {
        return item.label.indexOf(query) > -1
      }
    },
    renderFunc (h, option) {
      if (this.renderFn !== '' && typeof this.renderFn === 'function') {
        return this.renderFn()
      } else {
        return <span>{ option.label }</span>
      }
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        bgColor: this.bgColor,
        borderColor: this.borderColor,
        focusBorderColor: this.focusBorderColor
      }
    },
    formats () {
      if (this.useFormats && this.formatsFn !== '' && typeof this.formatsFn === 'function') {
        return this.formatsFn()
      }
    },
    titles () {
      if (this.titlesFn !== '' && typeof this.titlesFn === 'function') {
        return this.titlesFn()
      } else {
        return ['列表 1', '列表 2']
      }
    },
    buttontexts () {
      if (this.buttontextsFn !== '' && typeof this.buttontextsFn === 'function') {
        return this.buttontextsFn()
      } else {
        return []
      }
    }
  },

  mounted () {
    this.val = this.value
    this.setStyle()
  },

  watch: {
    value () {
      this.val = this.value
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
